<template>
    <view>
        <view class="j-toast-mask" v-if="visible && mask" @tap="handleHide"></view>
        <view class="j-class j-toast" v-if="visible">
            <block v-if="type !== 'default'">
                <view class="j-toast-type">
                    <j-icon j-class="j-toast-icon" type="success" v-if="type === 'success'"></j-icon>
                    <j-icon j-class="j-toast-icon" type="prompt" v-elif="type === 'warning'"></j-icon>
                    <j-icon j-class="j-toast-icon" type="delete" v-elif="type === 'error'"></j-icon>
                    <view class="j-toast-icon j-toast-loading" v-elif="type === 'loading'"></view>
                </view>
            </block>
            <block v-else>
                <j-icon j-class="j-toast-icon" type="icon" v-if="icon"></j-icon>
                <image class="j-toast-image" :src="image" v-if="image" mode="aspectFit"></image>
            </block>
            <view class="j-toast-content" v-if="content">{{ content }}</view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            content: '',
            icon: '',
            image: '',
            duration: 2,
            mask: true,
            type: 'default', // default || success || warning || error || loading
        },
        data() {
            return {

            };
        }
    }
</script>

<style>
    .i-toast {
        position: fixed;
        top: 35%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: rgba(0, 0, 0, .7);
        color: #fff;
        font-size: 14px;
        line-height: 1.5em;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 10px 18px;
        text-align: center;
        border-radius: 4px;
        z-index: 1010
    }

    .i-toast-mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1010
    }

    .i-toast-icon {
        font-size: 38px !important;
        margin-bottom: 6px
    }

    .i-toast-image {
        max-width: 100px;
        max-height: 100px
    }

    .i-toast-loading {
        display: inline-block;
        vertical-align: middle;
        width: 28px;
        height: 28px;
        background: 0 0;
        border-radius: 50%;
        border: 2px solid #fff;
        border-color: #fff #fff #fff #2d8cf0;
        animation: btn-spin .8s linear;
        animation-iteration-count: infinite
    }

    @keyframes btn-spin {
        0% {
            transform: rotate(0)
        }

        100% {
            transform: rotate(360deg)
        }
    }
</style>
